<template>
	<public-view navColor="#ffffff" topBgShow="4" navType="goods" navTitle="商品详情">
		<view class="content">
			<my-swiper :list="goods_info.images" swiperType="2"></my-swiper>
			<view class="store-box flex a-i-c j-c-b">
				<view class="left flex a-i-c color-333 f-s-30 f-w-b">
					<image class="icon" src="@/static/images/gift-store-333.svg" mode=""></image>
					{{goods_info.merchant.name||""}}
				</view>
				<view class="right flex a-i-c f-s-28 color-333" @click="goTo({url:'/pages/store/index?id='+goods_info.merchant.id})">
					进入店铺
					<image class="icon" src="@/static/images/store-next-ee8300.svg" mode=""></image>
				</view>
			</view>
			<view class="money-box color-F25454 f-s-42">
				<text class="f-s-22">￥</text>{{goods_info.price||0}}
			</view>
			<view class="goods-title w-100 f-w-b f-s-36 j-c-b flex">
				<view class="">
					{{goods_info.name||""}}
				</view>
				<view class="f-s-24 color-999 f-w-4">
					销量{{goods_info.sales||0}}
				</view>
			</view>
			<view class="good-tag-list flex f-w-w">
				<block v-for="(item, index) in goods_info.tags" :key="index">
					<view class="item f-s-24">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="line-ha"></view>
			<view class="pingjia-box">
				<view class="title-all-number color-333 f-w-b f-s-26 l-h-36" @click="openPl">
					用户评价（{{comments||0}}）
				</view>
				<block v-if="common_list.length>0">
					<view class="item-box flex f-d-c">
						<view class="flex w-100 j-c-b">
							<view class="left flex a-i-c">
								<image class="avatar" :src="common_list[0].user?.avatar" mode=""></image>
								<view class="name-box flex f-d-c">
									<view class="name color-333 f-s-24 l-h-34">
										{{subMobile(common_list[0].user?.mobile)}}
									</view>
									<uni-rate :size="12" disabled="true" disabledColor="#ffca3e" :value="common_list[0].star" />
								</view>
							</view>
							<view class="right f-s-22 color-999">
								{{common_list[0].createtime}}
							</view>
						</view>
						<view class="w-100 flex f-d-c">
							<view class="w-100 flex f-w-w">
								<block v-for="(item, index) in common_list[0].images" :key="index">
									<image class="info-image" :src="item" mode=""></image>
								</block>
							</view>
							<view class="info-text f-s-24 color-666">
								{{common_list[0].comment}}
							</view>
						</view>
					</view>
					<view class="look-all-btn f-s-26 all-center" @click="showMoreComment">
						查看更多
					</view>
				</block>
			</view>
			<view class="line-ha"></view>
			<view class="good-info-boxa">
				<rich-text :nodes="goods_info.details"></rich-text>
			</view>
			<view class="bottom-good-car-box flex a-i-c j-c-b">
				<view class="right-car-box flex f-d-c a-i-c f-s-20" @click="goTo({url:'/pages/shop/buyCar'})">
					<image class="icon" src="@/static/images/good-car-icon.svg" mode=""></image>
					购物车
				</view>
				<view class="btn-box-car flex a-i-c">
					<view class="item type1 all-center" @click="openCar">
						加入购物车
					</view>
					<view class="item type2 all-center" @click="openCar">
						立即购买
					</view>
				</view>
			</view>
			<uni-popup ref="buyBox" type="bottom">
				<view class="buy-box flex f-d-c a-i-c">
					<view class="f-s-28 f-w-b line-h-40 title">
						加入购物车
					</view>
					<scroll-view scroll-y="true" class="sku-box">
						<view class="w-100 flex f-d-c" style="padding: 0 36rpx;">
							<view class="goods-box flex a-i-c">
								<image class="icon" :src="sku_image" mode=""></image>
								<view class="color-ff4545 f-w-b f-s-42">
									<text class="f-s-22">￥</text>{{sku_price||0}}
								</view>
							</view>
							<view class="addres-view flex a-i-c j-c-b" v-if="!address_info.id"
								@click="goTo({url:'/pages/address/chooseAddress'})">
								<view class="left f-s-28 f-w-b flex a-i-c">
									<image class="address-icon" src="@/static/images/address-000.svg" mode=""></image>
									地址选择
								</view>
								<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
							</view>
							<view class="addres-view flex a-i-c j-c-b" v-else
								@click="goTo({url:'/pages/address/chooseAddress'})">
								<view class="left f-s-28 f-w-b flex">
									<image class="address-icon" src="@/static/images/address-000.svg" mode=""></image>
									<view class="">
										<view class="f-s-28">
											{{address_info.province_text||""}}{{address_info.city_text||""}}{{address_info.area_text||""}}{{address_info.address_desc ||""}}
										</view>
										<view class="color-979797 f-s-24" style="margin-top: 20rpx;">
											{{address_info.name||""}} {{address_info.mobile||""}}
										</view>
									</view>
								</view>
								<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
							</view>
							<block v-for="(item, index) in goods_info.sku_data.sku" :key="index">
								<view class="w-100 f-s-28 f-w-b">
									{{item.name}}
								</view>
								<view class="sku-box-viewa w-100 flex j-c-b" style="margin-bottom: 20rpx;">
									<block v-for="(itm, idx) in item.children" :key="idx">
										<view @click="chooseSku(index,idx,itm)" class="item flex j-c-b a-i-c" :class="itm.active === '1'?'active':'unactive999'" style="width: calc(100% / 2 - 16rpx);">
											<view class="f-s-28 ">
												{{itm.name||""}}
											</view>
											<!-- <view class="color-ff4545">
												￥198
											</view> -->
										</view>
									</block>
									<!-- <view class="item flex j-c-b a-i-c active" style="width: calc(100% / 2 - 16rpx);">
										<view class="f-s-28 ">
											服务类型三
										</view>
										<view class="color-ff4545">
											￥198
										</view>
									</view> -->
								</view>
							</block>
						</view>
					</scroll-view>
					<view class="sku-number-box flex a-i-c j-c-b">
						<view class="f-s-28 f-w-b">
							数量 <block v-if="stok>=0">（剩余库存：{{stok}}）</block><block v-else>（剩余库存：0）</block>
						</view>
						<view class="add-jian-box flex a-i-c">
							<view class="add all-center color-333 f-w-b" @click="changeGoodsNumber('jian')">
								-
							</view>
							<view class="number-input">
								<input class="input" v-model="goods_number" type="number" />
							</view>
							<view class="add all-center color-333 f-w-b" @click="changeGoodsNumber('jia')">
								+
							</view>
						</view>
					</view>
					<view class="buy-bottom-btn flex j-c-b">
						<view class="item btn1 f-s-30 all-center color-EE8300" @click="addCart">
							加入购物车
						</view>
						<view class="item btn2 f-s-30 all-center color-fff"
							@click="goToOrder">
							立即购买
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="allPL" type="bottom">
				<view class="goods-msg-box flex f-d-c a-i-c">
					<view class="f-s-28 f-w-b line-h-40 title">
						全部评价（{{comments||0}}）
					</view>
					<scroll-view scroll-y="true" class="scroll-view-box">
						<view class="w-100 flex f-d-c">
							<block v-for="(item, index) in common_list" :key="index">
								<view class="item w-100 flex f-d-c">
									<view class="user-box w-100 flex j-c-b">
										<view class="flex a-i-c left">
											<image class="avatar" :src="item.user?.avatar" mode=""></image>
											<view class="flex f-d-c">
												<view class="f-s-24 f-w-b" style="margin-bottom: 10rpx;">
													{{subMobile(item.user?.mobile)}}
												</view>
												<view class="flex a-i-c color-EE8300 f-s-26 f-w-b">
													<uni-rate :size="12" disabled="true" disabledColor="#ffca3e" :value="item.star" />
													{{item.star||0}}
												</view>
											</view>
										</view>
										<view class="f-s-22 color-999">
											{{item.createtime||""}}
										</view>
									</view>
									<view class="w-100 flex info f-d-c">
										<view class="w-100 flex f-w-w">
											<block v-for="(itm, idx) in item.images" :key="idx">
												<image class="info-image" :src="itm" mode=""></image>
											</block>
										</view>
										<view class="color-666 f-s-24 l-h-30" style="width: 554rpx;">
											{{item.comment||""}}
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
	</public-view>
</template>

<script>
	import mySwier from "@/components/myComponents/swiper.vue"
	import {
		goTo
	} from "@/nav.js"

	export default {
		components: {
			"my-swiper": mySwier
		},
		data() {
			return {
				swiper_list: ["/static/images/gas-swiper.svg", 1, 1, 1, 1, 1],
				address_info: {
					id: ""
				},
				goods_info:{
					merchant:{name:""},
					sku_data:{
						sku:[],
					}
				},
				goods_number:1,
				goods_id:"",
				open_type:'1',
				sku_guige:[],
				common_list:[],
				stok:0,
				comments:0,
				sku_image:"",
				sku_price:""
			};
		},
		onLoad(o) {
			if(o.id){
				this.goods_id = o.id
			}else{
				this.goods_id = JSON.parse(this.$store.state.goods_info).id
			}
			this.getGoodsInfo()
			if(o.type){
				this.open_type = o.type
			}
		},
		onShow() {
			if (this.$store.state.order_address.id) {
				this.address_info = this.$store.state.order_address
			} else {
				this.$getDefaultAddress((res) => {
					this.address_info = res.data || {
						id: ""
					}
				})
			}
			this.$setNotice()
			this.getCommonList()
		},
		methods: {
			goTo,
			subMobile(mobile){
				const prefix = mobile.replace(/^(.{3}).*$/, "$1");
				const maskedPhone = `${prefix}******`;
				return maskedPhone
			},
			showMoreComment(){
				this.$refs.allPL.open()
			},
			getCommonList(){
				let that = this
				that.util.postRequest({
					url:"v1/goods/getComment",
					data:{
						page:that.page,
						rows:10,
						goods_id:that.goods_id
					}
				}).then(res=>{
					console.log(res)
					that.common_list = res.data.data
					that.comments = res.data.total
				})
			},
			changeGoodsNumber(type){
				let arr = [],str = "",that = this
				that.goods_info.sku_data.sku.map(val=>{
					val.children.map(value=>{
						value.active === '1'&& arr.push(value.id)
					})
				})
				str = arr.join("_")||""
				let data = that.goods_info.sku_data.sku_products[str]||""
				if(!!!data){
					uni.showToast({
						title:"请先选择规格",
						icon:"none"
					})
					return
				}
				if(data.stock<=0){
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
					return
				}
				if(type === 'jian'){
					this.goods_number--
					if(this.goods_number<=0){
						this.goods_number = 1
						uni.showToast({
							title:"商品数量最少为1",
							icon:"none"
						})
					}
				}else{
					this.goods_number++
					// if(this.goods_number-this.goods_info.)
				}
				this.jisuanSku(false)
			},
			goToOrder(){
				let data = this.jisuanSku()
				if(!!!data){return}
				if(!!!this.address_info.id){
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
					return
				}
				this.$store.commit("changeShopOrder",{
					data:{
						goods_id:this.goods_info.id,
						goods_sku_product_id:this.goods_info.sku_data.sku_products[data].id,
						num:this.goods_number,
					},
					sku_products:this.goods_info.sku_data.sku_products[data],
					goods_info:this.goods_info
				})
				this.$refs.buyBox.close()
				this.goTo({url:'/pages/order/enterOrder'})
			},
			jisuanSku(show=true){
				let arr = [],str = "",that = this
				that.goods_info.sku_data.sku.map(val=>{
					val.children.map(value=>{
						value.active === '1'&& arr.push(value.id)
					})
				})
				str = arr.join("_")||""
				let data = that.goods_info.sku_data.sku_products[str]||""
				if(!!!data && show){
					uni.showToast({
						title:"规格选择不正确",
						icon:"none"
					})
					return false
				}
				if(data.stock>0){
					that.stok = data.stock - Number(that.goods_number)
				}else{
					that.stok = 0
				}
				if(data.stock<Number(that.goods_number)){
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
					if(data.stock!==0){
						that.goods_number = data.stock<0?1:data.stock
						
					}
					return false
				}
				console.log(data.image)
				data.image && (that.sku_image = data.image,that.sku_price = data.price)
				return str
			},
			chooseSku(index,idx,itm){
				let active = '0'
				let sku_arr=[]
				if(index === 0){
					this.goods_info.sku_data.sku[index].children[idx].active =  this.goods_info.sku_data.sku[index].children[idx].active=== '1'?'0':'1'
				}else{
					let flag = true
					for(let item of this.goods_info.sku_data.sku[index-1].children){
						if(item.active === '1'){
							flag = false
							break
						}
					}
					if(flag){
						uni.showToast({
							title:`请先选择${this.goods_info.sku_data.sku[index-1].name}的规格`,
							icon:"none"
						})
					}else{
						this.goods_info.sku_data.sku[index].children[idx].active =  this.goods_info.sku_data.sku[index].children[idx].active=== '1'?'0':'1'
						this.goods_info.sku_data.sku[index].children.forEach(val=>{
							if(val.id !== itm.id){
								if(val.active !== '0'){
									val.active = '0'
								}
							}
						})
					}
				}
				this.jisuanSku(false)
			},
			addCart(){
				let that = this
				let data = this.jisuanSku()
				console.log(data,that.goods_number,"that.goods_number")
				if(!!!data){return}
				that.util.postRequest({
					url:"v1/cart/add",
					data:{
						goods_id:that.goods_id,
						goods_sku_product_id:that.goods_info.sku_data.sku_products[data].id,
						num:that.goods_number,
						act:"add"
					}
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title:"添加成功"
					})
					that.$refs.buyBox.close()
				}).catch(e=>{
					console.log(e)
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
			},
			getGoodsInfo() {
				let that = this
				uni.showLoading({
					title:"加载中..."
				})
				that.util.postRequest({
					url: "v1/goods/info",
					data: {
						id: that.goods_id
					}
				}).then(res => {
					uni.hideLoading()
					// that.goods_info.detail
					res.data.sku_data.sku.forEach(val=>{
						val.children.forEach(value=>{
							value.active = '0'
						})
					})
					that.goods_info = res.data
					that.sku_image = res.data.image
					that.sku_price = res.data.price
					that.getGoodsSku()
					if(that.open_type === '2'){
						that.openCar()
					}
					var re = /<img\s+[^>]*style\s*=\s*['"]?([^'" >]+)['"]?[^>]*>/gi;
					
					that.goods_info.detail = that.goods_info.detail.replace(re, function (match, style) {
					  style = style.replace(/width:\s*\d+(px|%|in|cm|mm|em|rem|ex|pt|pc)?\s*;?/gi, 'width:100%;');
					  return '<img style="' + style + '" />';
					});
				}).catch(e=>{
					uni.hideLoading()
				})
			},
			getGoodsSku(){
				let that = this
				that.util.postRequest({
					url:"v1/goods/getSku",
					data:{
						id:that.goods_id
					}
				}).then(res=>{
					console.log(res)
				})
			},
			changeimg(){
			},
			openCar() {
				this.$refs.buyBox.open()
			},
			openPl() {
				this.$refs.allPL.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unactive999{
		color: #999999;
		padding: 12upx 18upx;
		background: #F8F9FA;
	}
	.buy-box {
		width: 100%;
		background: #FFFFFF;
		padding: 20upx 12upx;
		border-radius: 40upx 40upx 0 0;
		position: relative;

		.buy-bottom-btn {
			width: 100%;

			.item {
				width: 330upx;
				height: 96upx;
				border-radius: 128upx;
			}

			.btn1 {
				border: 2upx solid #EE8300;
			}

			.btn2 {
				background: #EE8300;
			}
		}

		.sku-number-box {
			width: 660upx;
			margin-bottom: 46upx;

			.add-jian-box {
				.number-input {
					width: 80upx;
					margin: 0 10upx;
					.input {
						width: 100%;
						text-align: center;
					}
				}

				.add {
					width: 48upx;
					height: 48upx;
					border-radius: 30upx;
					background: #F8F9FA;
				}
			}
		}

		.sku-box {
			width: 100%;
			height: 890upx;

			.sku-box-viewa {
				margin-top: 28upx;

				.item {
					border-radius: 16upx;
				}

				.active {
					border: 2upx solid #EE8300;
					color: #EE8300;
					padding: 12upx 18upx;
				}
			}

			.addres-view {
				padding: 32upx 0;
				margin-bottom: 28upx;

				.next-ic {
					width: 48upx;
					height: 48upx;
				}

				.left {
					.address-icon {
						width: 40upx;
						height: 40upx;
						margin-right: 8upx;
					}
				}
			}

			.goods-box {
				margin-bottom: 38upx;

				.icon {
					width: 148upx;
					height: 148upx;
					margin-right: 40upx;
				}
			}
		}
	}

	.goods-msg-box {
		width: 100%;
		background: #FFFFFF;
		padding: 20upx 12upx;
		border-radius: 40upx 40upx 0 0;

		.scroll-view-box {
			width: 100%;
			height: 950upx;

			.item {
				margin-bottom: 54upx;

				.info {
					margin-top: 14upx;

					.image {
						width: 108upx;
						height: 108upx;
						margin-right: 14upx;
					}
				}

				.user-box {
					.left {
						.avatar {
							width: 64upx;
							height: 64upx;
							margin-right: 16upx;
							border-radius: 50%;
						}
					}
				}
			}
		}

		.title {
			margin-bottom: 50upx;
		}
	}

	.bottom-good-car-box {
		width: 100%;
		background: #FFFFFF;
		padding: 16upx 22upx;
		position: fixed;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 16upx);

		.btn-box-car {
			.item {
				width: 248upx;
				height: 70upx;
				border-radius: 34upx;
			}

			.type1 {
				margin-right: 28upx;
				border: 2upx solid #EE8300;
				font-size: 26upx;
				color: #EE8300;
			}

			.type2 {
				color: #ffffff;
				font-size: 26upx;
				background: #EE8300;
			}
		}

		.right-car-box {
			width: 160upx;

			.icon {
				width: 40upx;
				height: 40upx;
				margin-bottom: 4upx;
			}
		}
	}

	.good-info-boxa {
		width: 710upx;
		margin: 22upx auto;

		rich-text {
			width: 100%;
		}
	}

	.pingjia-box {
		width: 100%;
		padding: 30upx 24upx;
		margin-bottom: 34upx;

		.look-all-btn {
			width: 642upx;
			padding-top: 24upx;
			border-top: 2rpx solid #f2f2f2;
			color: #bdbdbd;
		}

		.item-box {
			width: 100%;
			padding-bottom: 20upx;

			.info-text {
				width: 554upx;
				line-height: 32upx;
			}

			.info-image {
				width: 108upx;
				height: 108upx;
				margin-right: 14upx;
				margin-bottom: 6upx;
			}

			.right {}

			.left {
				margin-bottom: 18upx;

				.avatar {
					width: 64upx;
					height: 64upx;
					margin-right: 16upx;
					border-radius: 50%;
				}

				.name-box {
					.name {
						margin-bottom: 10upx;
					}
				}
			}
		}

		.title-all-number {
			margin-bottom: 22upx;
		}
	}

	.good-tag-list {
		padding: 0 24upx;
		margin-bottom: 42upx;

		.item {
			background: #FBEEE5;
			padding: 2upx 16upx;
			color: #EE8300;
			margin-right: 16upx;
			margin-bottom: 14upx;
		}
	}

	.goods-title {
		padding: 0 24upx;
		margin-bottom: 12upx;
		line-height: 50upx;
	}

	.money-box {
		margin-top: 22upx;
		line-height: 30upx;
		padding-left: 24upx;
		margin-bottom: 16upx;
	}

	.line-ha {
		width: 100%;
		height: 4upx;
		background: #fafafa;
	}

	.store-box {
		width: 100%;
		padding: 30upx 24upx 22upx;

		.right {
			.icon {
				width: 20upx;
				height: 20upx;
				margin-left: 12upx;
			}
		}

		.left {
			.icon {
				width: 30upx;
				height: 30upx;
				margin-right: 20upx;
			}
		}
	}

	.content {
		width: 750upx;
		min-height: 100vh;
		padding-top: 28upx;
		background: #FFFFFF;
	}
</style>